<template>
  <div>
    <!-- <div v-for="(item,index) in imgList" :key="index">
      <img :src="'http://localhost:3000/'+item.img" width="400">
    </div> -->
    <!-- <p>添加角色</p>
    <input type="text" v-model="rolename">
    <input type="text" v-model="menus">
    <input type="text" v-model="status">
    <button @click="addRole">添加</button> -->
    <!-- 下面这个input是修改角色 -->
    <input type="text" v-model="rolename" @keyup.enter="changeRole" />
  </div>
</template>

<script>
// 引入qs（安装命令：npm i qs -S）
import qs from 'qs'
import {get, post} from '../http'
import axios from 'axios'
export default {
  data() {
    return {
      imgList: [],
      rolename: "",
      menus: "",
      status: 1,
    };
  },
  created() {
    // 通过钩子函数，自动调用接口
    // this.getData();
    // 通过id获取角色信息
    // this.getInfoById();
    // 两个请求并发
    this.allGet()
    // 自己的get方法
    // this.selfGetInfoById();
  },
  methods: {
    // 两个请求并发的例子
    // 注意，这里要用原生axios来实现，不能用create的实例实现！spread同理
    allGet() {
      axios.all([this.getDataFn(), this.getInfoByIdFn()])
        .then(axios.spread((res1, res2) => {
          console.log(res1, res2);
        })) 
    },
    // 这个函数返回promise对象
    getDataFn() {
      return this.$http.get("/getbanner")
    },
    // 这个函数返回promise对象
    getInfoByIdFn() {
      return this.$http.get("/roleinfo?id=3")
    },
    // 获取轮播图
    getData() {
      // 开始发请求
      // get请求，两个参数（接口地址，携带的数据（可选））
      this.$http
        .get("/getbanner")
        .then((res) => {
          this.imgList = res.list;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 自己封装的get
    async selfGetInfoById() {
      // 这里用的是自己封装的get请求，所以需要加上api的前缀，因为它没有使用配置好的那个实例
      let res = await get('/api/roleinfo', {id: 3});
      console.log(res);
    },
    getInfoById() {
      // 带参数的get请求
      let roleId = 3;
      // 方式1，将数据拼接到url的params位置上
      // this.$http.get('/roleinfo?id=' + roleId)
      //   .then(res => {
      //     console.log(res);
      //   })
      //   .catch(err => {
      //     console.log(err);
      //   })
      // 方式2，通过params对象传入参数
      // this.$http.get('/roleinfo', {params: {
      //   id: roleId
      // }})
      //   .then(res => {
      //     console.log(res);
      //   })
      //   .catch(err => {
      //     console.log(err);
      //   })
      // 方式3，对象形式的get请求
      this.$http({
        // 地址
        url: "/roleinfo",
        // 默认get方法
        method: "get",
        // 数据,字段名就是params
        params: {
          id: roleId,
        },
      })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 添加角色
    addRole() {
      // 准备好数据
      let data = {
        rolename: this.rolename,
        menus: [1],
        status: this.status,
      };
      // post请求，两个参数（接口地址，携带的数据，对象类型的数据）
      this.$http
        .post("/roleadd", data)
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 修改角色
    changeRole() {
      let data1 = {
        id: 3,
        rolename: this.rolename,
        menus: [1, 2, 3, 7, 8, 9, 10, 11, 12, 14, 15, 19],
        status: 1,
      };
      // 方法1，通过data携带数据
      // this.$http
      //   .post("/roleedit", data1)
      //   .then((res) => {
      //     console.log(res);
      //   })
      //   .catch((err) => {
      //     console.log(err);
      //   });

      // 方法2，对象形式的post请求
      // this.$http({
      //   // 接口地址
      //   url: '/roleedit',
      //   // 请求的方法
      //   method: 'post',
      //   // 数据,字段名就是data
      //   data: data1
      // })
      //   .then((res) => {
      //     console.log(res);
      //   })
      //   .catch((err) => {
      //     console.log(err);
      //   });
      // 方法3，通过qs序列化数据，发送post请求（无文件）
      let data2 = qs.stringify(data1);
      // 根据情况选择是否需要序列化，这个项目中不需要
      this.$http.post('/roleedit', data2)
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
      // 上传文件时，需要将数据转成formData类型，然后才能上传
      let fd = new FormData(); // 实例化一个fd类型的数据
      fd.append('name', 111); // 新增数据
    },
  },
};
</script>

<style>
</style>